<script setup lang="ts">
import { reactive, ref } from 'vue'

interface Form {
  email: string
  tel: string
  info: string
}
const form = ref<Form>({
  email: '',
  tel: '',
  info: '',
})
const errors = reactive<Partial<Form>>({})

function validEmail() {
  const reg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!reg.test(form.value.email))
    errors.email = '请输入有效的邮箱地址'

  else
    errors.email = ''

  return !errors.email
}

function validTel() {
  const reg = /^1[3-9]\d{9}$/
  if (!reg.test(form.value.tel))
    errors.tel = '请输入有效的电话号码'

  else
    errors.tel = ''

  return !errors.tel
}

function validInfo() {
  if (!form.value.info)
    errors.info = '请填写信息'

  else
    errors.info = ''

  return !errors.info
}

function validForm() {
  return (
    validEmail() && validTel() && validInfo()
  )
}

function submit() {
  if (validForm()) {
    fetch('http://game.zchdby.com/server/Contact.ashx', {
      headers: {
        'content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
      },
      body: `mail=${encodeURIComponent(form.value.email)}&tel=${encodeURIComponent(form.value.tel)}&content=${encodeURIComponent(form.value.info)}`,
      method: 'POST',
    })

    form.value = {
      email: '',
      tel: '',
      info: '',
    }

    // eslint-disable-next-line no-alert
    window.alert('提交成功')
  }
}
</script>

<template>
  <div class="shadow-gray-200 p-30px <lg:my-20px w-full rounded-8px" style="box-shadow: 0 0 25px rgba(78,76,76,.15);">
    <div class="interact text-20px font-700">
      联系我们
    </div>
    <div>
      <input
        v-model.trim="form.email" placeholder="邮箱" type="email" placeholder-class="input-placeholder"
        :class="{ 'border-red-500': errors.email }" @blur="validEmail"
      >
      <div v-if="errors.email" class="text-red-500">
        {{ errors.email }}
      </div>
    </div>
    <div>
      <input
        v-model.trim="form.tel" placeholder="电话" type="tel" placeholder-class="input-placeholder"
        :maxlength="11"
        :class="{ 'border-red-500': errors.tel }" @blur="validTel"
      >
      <div v-if="errors.tel" class="text-red-500">
        {{ errors.tel }}
      </div>
    </div>
    <div>
      <textarea
        v-model.trim="form.info" placeholder="填写信息..." placeholder-class="textarea-placeholder"
        :class="{ 'border-red-500': errors.info }" @blur="validInfo"
      />
      <div v-if="errors.info" class="text-red-500">
        {{ errors.info }}
      </div>
    </div>
    <div
      class="text-center mt-25px font-500 bg-blue-400 cursor-pointer text-white py-12px rounded-4px text-16px"
      hover="bg-white text-blue-500 b-blue-400 b-1" @click="submit"
    >
      提交
    </div>
  </div>
</template>

<style>
.interact {
  @apply relative;
}

input:focus {
  outline: 1px solid rgb(80, 173, 80);
}

textarea:focus {
  outline: 1px solid rgb(80, 173, 80);
}

.interact::before {
  content: '';
  width: 5px;
  height: 33px;
  position: absolute;
  left: -30px;
  top: 0;
  background: skyblue;
  @apply bg-[#509cff];
}

input,
textarea {
  @apply p-10px w-[100%] border-1 rounded-8px mt-25px text-14px;
}

textarea {
  @apply h-120px;
}
</style>
